/**
* 左边菜单
*/
<template>
  <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened
           class="el-menu-vertical-demo" background-color="#fff" text-color="#333" active-text-color="#ff00ff">
    <div class="logobox">
      <label v-if="collapsed">
        <img class="showimgLeft"  v-on:click="openCollapsed"  src="" >

      </label>
      <label v-else>系统菜单
      <img class="showimgRight" v-on:click="closeCollapsed"
           src="" @click="toggle(collapsed)">
      </label>
    </div>
    <el-submenu v-for="menu in allmenu" :key="menu.menuid" :index="menu.menuname">
      <template slot="title">
        <i class="iconfont" :class="menu.icon" style="color: #333"></i>
        <span>{{menu.menuname}}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item v-for="chmenu in menu.menus" :index="'/'+chmenu.url" :key="chmenu.menuid">
          <i class="iconfont" :class="chmenu.icon" style="color: #333"></i>
          <span>{{chmenu.menuname}}</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>
<script>
import { menu } from '../api/userMG'
export default {
  name: 'leftnav',
  data() {
    return {
      collapsed: false,
      allmenu: []
    }
  },
    methods:{
        closeCollapsed(){
            this.collapsed = true;
            this.$root.Bus.$emit('toggleLeftNav', false)
        },
        openCollapsed(){
            this.collapsed = false;
            this.$root.Bus.$emit('toggleLeftNav', true)
        }
    },
  // 创建完毕状态(里面是操作)
  created() {
    // 获取图形验证码
    let res = {
      success: true,
      data: [
          {
              menuid: 1011,
              icon: 'li-icon-xiangmuguanli',
              menuname: '内容管理',
              hasThird: null,
              url: null,
              menus: [
                  {
                      menuid: 1012,
                      icon: 'icon-cat-skuQuery',
                      menuname: '视频管理',
                      hasThird: 'N',
                      url: 'video/index',
                      menus: null
                  },
                  // {
                  //     menuid: 1013,
                  //     icon: 'icon-cat-skuQuery',
                  //     menuname: '新闻管理',
                  //     hasThird: 'N',
                  //     url: 'news-item/index',
                  //     menus: null
                  // },
                  // {
                  //     menuid: 1014,
                  //     icon: 'icon-cat-skuQuery',
                  //     menuname: '新闻栏目',
                  //     hasThird: 'N',
                  //     url: 'news-item-category/index',
                  //     menus: null
                  // }
              ]
          },
          // {
          //     menuid: 1011,
          //     icon: 'li-icon-xiangmuguanli',
          //     menuname: '内容管理',
          //     hasThird: null,
          //     url: null,
          //     menus: [
          //         {
          //             menuid: 1012,
          //             icon: 'icon-cat-skuQuery',
          //             menuname: '广告管理',
          //             hasThird: 'N',
          //             url: 'advertisement/index',
          //             menus: null
          //         },
          //         {
          //             menuid: 1013,
          //             icon: 'icon-cat-skuQuery',
          //             menuname: '新闻管理',
          //             hasThird: 'N',
          //             url: 'news-item/index',
          //             menus: null
          //         },
          //         {
          //             menuid: 1014,
          //             icon: 'icon-cat-skuQuery',
          //             menuname: '新闻栏目',
          //             hasThird: 'N',
          //             url: 'news-item-category/index',
          //             menus: null
          //         }
          //     ]
          // },
        // {
        //   menuid: 1,
        //   icon: 'li-icon-xiangmuguanli',
        //   menuname: '产品管理',
        //   hasThird: null,
        //   url: null,
        //   menus: [
        //     {
        //       menuid: 2,
        //       icon: 'icon-cat-skuQuery',
        //       menuname: '产品栏目',
        //       hasThird: 'N',
        //       url: 'product-category/index',
        //       menus: null
        //     },
        //       {
        //           menuid: 211,
        //           icon: 'icon-cat-skuQuery',
        //           menuname: '产品管理',
        //           hasThird: 'N',
        //           url: 'product/index',
        //           menus: null
        //       },
        //       {
        //           menuid: 212,
        //           icon: 'icon-cat-skuQuery',
        //           menuname: '生产商管理',
        //           hasThird: 'N',
        //           url: 'manufacturer/index',
        //           menus: null
        //       }
        //   ]
        // },
        // {
        //   menuid: 33,
        //   icon: 'li-icon-dingdanguanli',
        //   menuname: '订单管理',
        //   hasThird: null,
        //   url: null,
        //   menus: [
        //     {
        //       menuid: 34,
        //       icon: 'icon-order-manage',
        //       menuname: '交易订单',
        //       hasThird: 'N',
        //       url: 'pay/Order',
        //       menus: null
        //     }
        //   ]
        // },
        // {
        //   menuid: 71,
        //   icon: 'li-icon-xitongguanli',
        //   menuname: '系统管理',
        //   hasThird: null,
        //   url: null,
        //   menus: [
        //     {
        //       menuid: 72,
        //       icon: 'icon-cus-manage',
        //       menuname: '用户管理',
        //       hasThird: 'N',
        //       url: 'system/user',
        //       menus: null
        //     },
        //     {
        //       menuid: 174,
        //       icon: 'icon-cms-manage',
        //       menuname: '菜单管理',
        //       hasThird: 'N',
        //       url: 'system/Module',
        //       menus: null
        //     },
        //     {
        //       menuid: 73,
        //       icon: 'icon-news-manage',
        //       menuname: '角色管理',
        //       hasThird: 'N',
        //       url: 'system/Role',
        //       menus: null
        //     },
        //     {
        //       menuid: 74,
        //       icon: 'icon-cs-manage',
        //       menuname: '公司管理',
        //       hasThird: 'N',
        //       url: 'system/Dept',
        //       menus: null
        //     },
        //     {
        //       menuid: 75,
        //       icon: 'icon-promotion-manage',
        //       menuname: '系统环境变量',
        //       hasThird: 'N',
        //       url: 'system/Variable',
        //       menus: null
        //     },
        //     {
        //       menuid: 76,
        //       icon: 'icon-cms-manage',
        //       menuname: '权限管理',
        //       hasThird: 'N',
        //       url: 'system/Permission',
        //       menus: null
        //     }
        //   ]
        // },
        // {
        //   menuid: 128,
        //   icon: 'li-icon-shangchengxitongtubiaozitihuayuanwenjian91',
        //   menuname: '支付管理',
        //   hasThird: null,
        //   url: null,
        //   menus: [
        //     {
        //       menuid: 129,
        //       icon: 'icon-provider-manage',
        //       menuname: '支付配置信息',
        //       hasThird: 'N',
        //       url: 'machine/MachineConfig',
        //       menus: null
        //     },
        //     {
        //       menuid: 175,
        //       icon: 'icon-provider-manage',
        //       menuname: '支付配置',
        //       hasThird: 'N',
        //       url: 'pay/Config',
        //       menus: null
        //     }
        //   ]
        // },
        {
          menuid: 150,
          icon: 'li-icon-shangchengxitongtubiaozitihuayuanwenjian91',
          menuname: '图表',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 159,
              icon: 'icon-provider-manage',
              menuname: '数据可视化',
              hasThird: 'N',
              url: 'charts/statistics',
              menus: null
            }
          ]
        }
      ],
      msg: 'success'
    }

    this.allmenu = res.data

    this.$root.Bus.$on('toggle', value => {
      this.collapsed = !value
    })

  }
}
</script>
<style >
  .showimgRight{
    width: 24px;
    height: 24px;
    float: right;
    margin: 10px;
    cursor: pointer;
  }
  .showimgLeft{
    width: 24px;
    height: 24px;
    margin: 10px 10px;
    cursor: pointer;
  }
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 220px;
  min-height: 400px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
  text-align: left;
}
.el-menu-item-group__title {
  padding: 0px;
}
.el-menu-bg {
  background-color: #1f2d3d !important;
}
.el-menu {
  border: none;
}

.logobox {
  height: 40px;
  line-height: 40px;
  color: #9d9d9d;
  background: #3595da;
  font-size: 14px;
  padding-left: 10px;
  text-align: left;
  color: white;
  border:1px solid #2f81bc;

}
.logoimg {
  height: 40px;
}
</style>
